<template>
  <div class="lyric">
    <ul
      ref="list"
      class="lyriclist"
      :style="{ transform: `translateY(${-offH}px)` }"
      v-if="!sh"
    >
      <li
        v-for="(i, index) in parsedLyric"
        :class="{ active: index == currentLyric.index }"
        :key="index"
      >
        <span
          :style="`animationDuration:${anitime}s`"
          :class="{ pause: !playing }"
        >
          {{ i.text }}
        </span>
      </li>
    </ul>
    <LoadingView v-if="sh"></LoadingView>
  </div>
</template>

<script>
import LoadingView from "@/components/LoadingView.vue";
export default {
  props: {
    currentSong: Object,
    currentTime: Number,
    playing: Boolean,
  },
  components: {
    LoadingView,
  },
  data: function () {
    return {
      lyric: "",
      offH: 0,
      sh: true,
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/lyric?id=" + this.currentSong.id)
      .then((res) => {
        this.lyric = res.data.lrc.lyric;
        this.sh = false;
        // 初次进入滚动获取dom歌词滚动
        this.$nextTick(function () {
          var h = [...this.$refs.list.querySelectorAll("li")]
            .slice(0, this.currentLyric.index)
            .reduce(function (total, element) {
              return total + Number(element.offsetHeight);
            }, 0);

          var offsetH;
          if (h < 438.69 / 2) {
            offsetH = 0;
          } else if (h > Number(this.$refs.list.offsetHeight) - 438.69 / 2) {
            offsetH = Number(this.$refs.list.offsetHeight) - 438.69;
          } else {
            offsetH = h - 438.69 / 2;
          }
          this.offH = offsetH;
        });
      });
  },
  mounted: function () {
    // 初次进入也 先滚动以下
  },
  methods: {
    parseLyric: function (lyrics) {
      return lyrics
        .split("\n")
        .filter((i) => i)
        .map((item) => {
          var itemarr = item.match(/^\[(\d{2}:\d{2}\.\d{2,3})\](.*)/);
          var timearr = itemarr[1].split(":");
          return {
            time: timearr[0] * 60 + timearr[1] * 1,
            text: itemarr[2],
          };
        });
    },
    findLyric: function (parsedLyric, currentTime) {
      var lts = parsedLyric.filter((o) => o.time < currentTime);
      return {
        index: lts.length - 1,
        lyric: lts[lts.length - 1],
      };
    },
  },
  computed: {
    parsedLyric: function () {
      return this.parseLyric(this.lyric);
    },
    currentLyric: function () {
      return this.findLyric(this.parsedLyric, this.currentTime);
    },
    anitime: function () {
      if (this.parsedLyric) {
        var t =
          this.parsedLyric[this.currentLyric.index + 1].time -
          this.parsedLyric[this.currentLyric.index].time;
      }
      return t;
    },
  },
  watch: {
    "currentLyric.index": function (n) {
      var h = [...this.$refs.list.querySelectorAll("li")]
        .slice(0, n)
        .reduce(function (total, element) {
          return total + Number(element.offsetHeight);
        }, 0);
      var offsetH;
      if (h < 438.69 / 2) {
        offsetH = 0;
      } else if (h > Number(this.$refs.list.offsetHeight) - 438.69 / 2) {
        offsetH = Number(this.$refs.list.offsetHeight) - 438.69;
      } else {
        offsetH = h - 438.69 / 2;
      }
      this.offH = offsetH;
    },
    currentSong: function (n) {
      this.axios
        .get("https://apis.netstart.cn/music/lyric?id=" + n.id)
        .then((res) => {
          this.lyric = res.data.lrc.lyric;
          this.sh = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.lyric {
  height: 438.69px;
  overflow: hidden;

  .lyriclist {
    li {
      width: 100%;
      text-align: center;
      color: #bbb;
      padding: 15px;
      span {
        background-image: linear-gradient(
          to right,
          #d44540 0% 50%,
          white 50% 100%
        );
        -webkit-background-clip: text;
        background-size: 200%;
        background-position-x: 100%;
        animation-name: bganimate;
        animation-timing-function: linear;
        animation-play-state: paused;
      }
      &.active {
        color: transparent;
        font-size: 20px;
        span {
          animation-play-state: running;
          &.pause {
            animation-play-state: paused;
          }
        }
      }
    }
  }
}
@keyframes bganimate {
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0;
  }
}
</style>